<template>
  <div class="write">
    <div class="write-wrapper">
        <h1>发表新攻略</h1>
        <div class="write-word">分享你的个人游记，让更多人看到哦！</div>
        <el-input v-model="title" placeholder="请输入标题" class="write-title"></el-input>
        <quillEditor v-model="content"/>
        <span>选择城市：</span>
        <el-autocomplete
          :fetch-suggestions="getDepartList"
          placeholder="请搜索出发城市"
          class="el-autocomplete"
          v-model="city"
          @select="selectDepartCity"
          :trigger-on-focus="false"
          :highlight-first-item="true"
        ></el-autocomplete>
        <div>
        <el-button type="primary" size="mini" @click="submit">发布</el-button>
          或者
        <span class="write-draft" @click="saveToDraft"> 保存到草稿箱</span>
    </div>
    </div>
    <drafts class="write-drafts" @draftData="getDraftData"  />
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import drafts from '../../components/post/draft'
export default {
  name: '',
  components: {
    quillEditor,
    drafts
  },
  data () {
    return {
      title: '',
      city: '',
      content: '',
      drafts: [],
      cityCode: ''
    }
  },
  methods: {
    submit () {
      this.$http.post('/posts', {
        content: this.content,
        title: this.title,
        city: this.city
      },
      {
        headers: {
          Authorization: `Bearer ${this.$store.state.user.userInfo.token}`
        }
      }).then(res => {
        console.log(res)
        const { data } = res.data
        this.content = ''
        this.title = ''
        this.city = ''
        this.$router.push({
          path: '/post/details',
          query: {
            id: data.id
          }
        })
      })
    },
    saveToDraft () {
      const date = new Date()
      const year = date.getFullYear()
      const moonth = date.getMonth() + 1
      const days = date.getDate()
      const curday = `${year}-${moonth}-${days}`
      console.log(curday)
      const draftData = {
        content: this.content,
        title: this.title,
        city: this.city,
        curday
      }

      const localDraft = JSON.parse(localStorage.getItem('drafts') || '[]')

      localDraft.push(draftData)
      localStorage.setItem('drafts', JSON.stringify(localDraft))
      this.content = ''
      this.title = ''
      this.city = ''
      // localstore 在子组件会loop 造成watch不了，所以只能用这个方式刷新页面，之后在查其他方法
      location.reload()
    },
    getDraftData (data) {
      this.content = data.content
      this.title = data.title
      this.city = data.city
    },
    getDepartList (depart, cb) {
      console.log(depart)
      if (!depart) return
      this.$http.get('/airs/city', { params: { name: depart } }).then(res => {
        const { data } = res.data
        const newDepData = data.map(v => {
          return {
            ...v,
            value: v.name.replace('市', '')
          }
        })
        this.cityCode = newDepData[0].sort
        cb(newDepData)
      }).catch(err => {
        console.log(err)
      })
    },
    selectDepartCity (item) {
      this.cityCode = item.sort
      this.city = item.value
    }
  },
  watch: {
    content (val) {
    }
  }
}
</script>

<style lang="less" scoped>
.write{
    position: relative;
    width: 1000px;
    margin: 30px auto;
    .write-wrapper{
      width: 700px;
      h1{
        font-size: 25px;
        padding: 10px 0;
      }
      .write-word{
        font-size: 12px;
        padding: 10px 0;
        color: gray;
      }
      .write-title{
        margin: 10px 0;
      }
      /deep/.ql-editor{
        min-height: 300px;
      }
      .write-city{
        width: 300px;
        margin: 20px 0;
      }
      .write-draft{
        font-size: 12px;
        color: orange;
        cursor: pointer;
        &:hover{
          text-decoration: underline;
        }
      }
    }
    .write-drafts{
        position: absolute;
        right: 0;
        top: 0;
        width: 230px;
        padding: 3px 5px 15px 5px;
        border:  1px solid rgb(230, 230, 230);
        border-radius: 5px;
    }
}

</style>
